<template>
  <view class="container">
    首页
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 状态定义 -----------------------------------------------------------------
const loading = ref(false)
const showAnimation = ref(false) // 动画状态


// 生命周期钩子 -----------------------------------------------------------------
onMounted(() => {
  init()
})

onShow(() => {
  // 页面载入后，延时显示动画
  setTimeout(() => {
    showAnimation.value = true;
  }, 100);
})

onHide(() => {
  // 页面隐藏时，重置动画状态
  showAnimation.value = false;
})

// 方法定义 -----------------------------------------------------------------
const init = async () => {
  try {
    loading.value = true
    // 初始化逻辑
  } catch (error) {
    console.error(error)
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #f5f5f5;
}


// 动画效果
.card-animate {
  opacity: 0;
  transform: translateY(20rpx);
  animation: fadeInUp 0.5s forwards;
}

.cancel-login {
  color: #2b92ff;
  text-align: center;
  letter-spacing: 5rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
  width: 100%;
  border-radius: 30rpx;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>